<template>
  <!--工作台卡片排序按钮组件-->
  <div class="sort_btn" @click="changeOrder" :class="{'active_btn': order !== 'descending'}">
    <p class="icon_item">
      <i class="el-icon-caret-top" :class="{'active_status': order === 'desc'}"></i>
      <i class="el-icon-caret-bottom" :class="{'active_status': order === 'asc'}"></i>
    </p>
    <span class="word_item">按工序名称</span>
  </div>
</template>

<script>
export default {
  name: 'SortBtn',
  props: {
    field: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      order: 'descending',
    }
  },
  methods: {
    // 点击排序按钮
    changeOrder() {
      if (this.order === 'descending') {
        this.order = 'asc'
      } else if (this.order === 'asc') {
        this.order = 'desc'
      } else if (this.order === 'desc') {
        this.order = 'descending'
      }
      const sort = {}
      if (this.order !== 'descending') {
        sort[this.field] = this.order
        this.$emit('sort-change', sort)
      } else {
        this.$emit('sort-change', {})
      }
    },
    // 还原排序条件
    clearSort() {
      this.order = 'descending'
    }
  }
}
</script>

<style scoped lang="less">
  .sort_btn{
    margin-right: 30px;
    cursor:pointer;
    color: #333;
    user-select: none;
    display: flex;
    .icon_item{
      position: relative;
      width: 20px;
      height: 40px;
      i{
        width: 16px;
        height: 16px!important;
        position: absolute;
        &:first-child{
          top: 10px;
          left: 0;
        }
        &:last-child{
          top: 16px;
          left: 0;
        }
        &.active_status{
          color: #06C;
        }
      }
    }
    .word_item{
      line-height: 40px;
    }
  }
</style>
